<template>
  <div :class="['header',cname]">
  	<span v-if="back"  @click="tapBack" class="icon-back tap-item"></span>
    <slot></slot>
    <div class="tap-middle-padding"></div>
  	<span @click="tapSearch" class="icon-search tap-item"></span>
  	<span @click="tapList" class="icon-list tap-item"></span>
  </div>
</template>

<script>
export default {
	props: {
		cname: {
			type: String,
			default: ''
		},
		back: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		// 点击返回
		tapBack() {
			console.log('点击返回')
      this.$emit('onBack')
		},
		//点击搜索
		tapSearch() {
      console.log('点击搜索')
      this.$emit('onSearch')
		},
		//点击弹出/关闭 NavMenu层
		tapList() {
      console.log('点击弹出列表层')
      this.$emit('onMenu')
		}
	}
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/color.scss';
@import '../../assets/style/mixin.scss';
.header {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  z-index: 149;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
	.tap-middle-padding {
		flex: 1;
    -ms-flex: 1;
		-webkit-box-flex: 1;
	}
	.tap-item {
	  color: $color-text-fa;
		width: 50px;
		height: 50px;
		border-radius: 50%;
  	font-size: $font-size-24;
		@include center;
	}
}
</style>
